<template>
  <div class="oj-list-container">
    <!-- 顶部横幅 -->
    <div class="banner-list">
      <div class="banner" v-for="(banner, idx) in banners" :key="idx">
        <img :src="banner.img" :alt="banner.title" />
        <div class="banner-title">{{ banner.title }}</div>
      </div>
    </div>
    <!-- 分类标签 -->
    <div class="tag-bar">
      <span :class="['tag', currentTag === tag ? 'active' : '']" v-for="tag in tags" :key="tag" @click="currentTag = tag">{{ tag }}</span>
    </div>
    <!-- 搜索框 -->
    <div class="search-bar">
      <input v-model="searchText" placeholder="搜索题目/编号..." />
    </div>
    <!-- 题目列表 -->
    <table class="problem-table">
      <thead>
        <tr>
          <th>编号</th>
          <th>标题</th>
          <th>通过率</th>
          <th>难度</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="problem in filteredProblems" :key="problem.id" @click="goToDetail(problem.id)">
          <td>{{ problem.id }}</td>
          <td class="title">{{ problem.title }}</td>
          <td>{{ problem.passRate }}%</td>
          <td :class="['difficulty', problem.difficulty]">{{ difficultyText(problem.difficulty) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'CangjieOJList',
  data() {
    return {
      banners: [
        { img: require('@/assets/courses/1.jpg'), title: '仓颉程序设计语言入门' },
        { img: require('@/assets/courses/2.jpg'), title: '数据结构与算法' },
        { img: require('@/assets/courses/3.jpg'), title: '算法设计与分析' }
      ],
      tags: ['全部题目', '算法', '字符串', '数组', '数学', '动态规划'],
      currentTag: '全部题目',
      searchText: '',
      problems: [
        { id: 1, title: '两数之和', difficulty: 'easy', passRate: 70.4, tags: ['算法', '数组'] },
        { id: 2, title: '两数相加', difficulty: 'easy', passRate: 55.0, tags: ['算法', '数学'] },
        { id: 3, title: '无重复字符的最长子串', difficulty: 'medium', passRate: 45.5, tags: ['字符串'] },
        { id: 4, title: '寻找两个正序数组的中位数', difficulty: 'medium', passRate: 41.2, tags: ['数组', '算法'] },
        { id: 5, title: '最长回文子串', difficulty: 'hard', passRate: 43.5, tags: ['字符串', '动态规划'] },
        { id: 6, title: 'Z 字形变换', difficulty: 'medium', passRate: 53.8, tags: ['字符串'] },
        { id: 7, title: '整数反转', difficulty: 'medium', passRate: 35.6, tags: ['数学'] },
        { id: 8, title: '字符串转换整数 (atoi)', difficulty: 'hard', passRate: 21.6, tags: ['字符串'] },
        { id: 9, title: '回文数', difficulty: 'easy', passRate: 56.4, tags: ['数学'] }
      ]
    }
  },
  computed: {
    filteredProblems() {
      let list = this.problems;
      if (this.currentTag !== '全部题目') {
        list = list.filter(p => p.tags.includes(this.currentTag));
      }
      if (this.searchText.trim()) {
        const s = this.searchText.trim().toLowerCase();
        list = list.filter(p => p.title.toLowerCase().includes(s) || String(p.id).includes(s));
      }
      return list;
    }
  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/cangjie-oj/${id}`);
    },
    difficultyText(d) {
      if (d === 'easy') return '简单';
      if (d === 'medium') return '中等';
      if (d === 'hard') return '困难';
      return d;
    }
  }
}
</script>

<style scoped>
.oj-list-container {
  max-width: 1100px;
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 32px 24px;
}
.banner-list {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}
.banner {
  flex: 1;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.banner img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.banner-title {
  position: absolute;
  left: 16px;
  bottom: 10px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tag-bar {
  margin-bottom: 18px;
}
.tag {
  display: inline-block;
  background: #f3f4f6;
  color: #6d28d2;
  border-radius: 16px;
  padding: 6px 18px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s, color 0.2s;
}
.tag.active {
  background: #6d28d2;
  color: #fff;
}
.search-bar {
  margin-bottom: 18px;
}
.search-bar input {
  width: 260px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}
.problem-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.problem-table th, .problem-table td {
  padding: 10px 8px;
  text-align: left;
}
.problem-table tr {
  cursor: pointer;
  transition: background 0.15s;
}
.problem-table tr:hover {
  background: #f3f4f6;
}
.problem-table .title {
  color: #6d28d2;
  font-weight: 500;
}
.difficulty {
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.difficulty.easy {
  color: #22c55e;
}
.difficulty.medium {
  color: #f59e42;
}
.difficulty.hard {
  color: #ef4444;
}
</style> 